<template>
	<view :style="[{paddingTop:CustomBar+'px'}]">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">购物车</block>
		</cu-custom>
		<view class="cart-cont" v-if="proNums>0">
			<view class="head-use">
				<text>共{{proNums}}种</text>
				<text @click="adminUse">{{adminStatus?'完成':'管理'}}</text>
			</view>
			<view class="cart-item" v-for="(item,index) in productList" :key="index">
				<view class="shop-info">
					<view class="is_truth" :class="item.isTruth?'be_truth':''" @click="truthParent" :data-id="item.shop_id"></view>
					<image :src="item.shop_img" mode=""></image>
					<view class="s_name">
						{{item.shop_name}}
					</view>
				</view>
				<view class="goods-info">
					<view class="goods-item" v-for="(pro,i) in item.goods_data" :key="i">
						<view class="is_truth" :class="pro.isTruth?'be_truth':''" @click="truthNow" :data-id="pro.id"></view>
						<image :src="pro.goodsImg" mode=""></image>
						<view class="info">
							<view class="name">
								{{pro.goodsName}}
							</view>
							<view class="bottom">
								<view class="price">
									<text v-if="pro.shopPrice!=0" class="text-price text-colorP">{{pro.shopPrice}}</text>
									<text v-if="pro.shopPrice!=0 && pro.integral!=0" class="text-colorP">+</text>
									<text v-if="pro.integral!=0" class="text-colorP">{{pro.integral}}</text>
									<text v-if="pro.integral!=0" class="text-colorP  j_f">积分</text>
								</view>
								<tui-numberbox min="1" readonly="true" :value="pro.cartNum" :height="40" :ProId="pro.id" @change="change"></tui-numberbox>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<noContent v-if="noContentShow" :showType="'shopCar'"></noContent>
		<view class="goShopping" v-if="noContentShow" @click="goShop">
			去商城
		</view>

		<!-- 是否需要分开结算 -->
		<view class="separate-layer" v-if="separateStatus"></view>
		<view class="separate" :style="[{bottom: separateStatus?'0':'-800rpx'}]">
			<view class="">
				请分开结算以下商品
			</view>
			<view class="content">
				<view class="separate-item" v-for="(item,index) in needSeparate" :key="index">
					<view class="">
						<view class="">{{item.shopInfo.shopName}}</view>
						<view class="">
							<text>共{{item.productList.length}}件，合计：共</text>
							<text class="text-price" v-if="item.zoomPrice!=0">{{item.zoomPrice}}</text>
							<text class="text-colorP" v-if="item.zoomPrice!=0 && item.zoomScord!=0">+</text>
							<text class="text-colorP" v-if="item.zoomScord!=0">{{item.zoomScord}}</text>
							<text class="text-colorP" v-if="item.zoomScord!=0">积分</text>
						</view>
					</view>
					<view class="" @click="separatePay" :data-index="index">
						结算
					</view>
				</view>
			</view>
			<view class="btn" @click="canselSparate">关闭</view>
		</view>
		<!-- 管理浮层 -->
		<view class="bottom-use-btn" :style="[{bottom: adminStatus?'0':'-106rpx'}]">
			<view class="left" @click="checkAll">
				<view class="is_truth" :class="allTruth?'be_truth':''"></view>
				<text class="">全选</text>
			</view>
			<view class="right">
				<text @click="deleteALL">删除</text>
				<text @click="concel">取消</text>
			</view>
		</view>
		<!-- 操作栏 -->
		<view class="bottom-use-btn" style="bottom: 0;z-index: 8;" v-if="proNums>0">
			<view class="left" @click="checkAll">
				<view class="is_truth" :class="allTruth?'be_truth':''"></view>
				<text class="">全选</text>
			</view>
			<view class="price-and-btn">
				<view class="price-content">
					<view class="">
						<view class="">
							<text>合计：</text>
							<text v-if="totalAmount.status=='price' || totalAmount.status=='all'" class="text-price text-colorP">{{totalAmount.price}}</text>
							<text v-if="totalAmount.status=='all'" class="text-colorP">+</text>
							<text v-if="totalAmount.status=='scord' || totalAmount.status=='all'" class="text-colorP">{{totalAmount.scord}}</text>
							<text v-if="totalAmount.status=='scord' || totalAmount.status=='all'" class="text-colorP  j_f">积分</text>
						</view>
					</view>
					<view class="">
						包邮,免税
					</view>
				</view>
				<view class="settle" @click="settle">
					结算({{hasBeNums}})
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tuiNumberbox from "@/components/thorUI/numberbox"
	import noContent from "../component/noContent"
	export default {
		components: {
			tuiNumberbox,
			noContent
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				allTruth: false,
				adminStatus: false,
				proNums: 0,
				noContentShow: false,
				productList: [],
				// 合计金额
				totalAmount: {
					price: 0,
					scord: 0,
					status: 'price'
				},
				hasBeNums: 0,
				separateStatus: false,
				
				needSeparate:[]
			}
		},
		onShow() {
			if (uni.getStorageSync('needData')) {
				uni.removeStorageSync('needData')
			}
		},
		onLoad() {
			this.getShoppingCar()
		},
		methods: {
			// 分开结算
			separatePay(e){
				uni.setStorageSync('needData', this.needSeparate[e.currentTarget.dataset.index])
				uni.navigateTo({
					url: '/pages/confirmOrder'
				})
			},
			canselSparate() {
				this.separateStatus = false
			},
			// 去商城
			goShop() {
				uni.switchTab({
					url: '/pages/tabBar/cloudMall'
				})
			},
			getShoppingCar() {
				var that = this;
				this.$request({
					url: '/ShopCarts/get_carts',
					success: res => {
						if (res.data.status == 1) {
							var result = res.data.data
							result.forEach(item => {
								item['isTruth'] = false
								item.goods_data.forEach(jtem => {
									jtem['isTruth'] = false
								})
							})
							that.productList = result
							// 初始化计算
							that.computedPro()
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 管理商品
			adminUse() {
				var that = this
				that.adminStatus = !that.adminStatus
			},
			concel() {
				var that = this
				var productList = this.productList
				productList.forEach(item => {
					item.isTruth = false
					item.goods_data.forEach(j => {
						j.isTruth = false
					})
				})
				this.adminStatus = false
			},
			deleteALL() {
				var that = this
				var hasGoods = false
				var productList = this.productList
				var requestData = []
				productList.forEach(item => {
					if (item.isTruth) {
						hasGoods = true
					}
					item.goods_data.forEach(j => {
						if (j.isTruth) {
							hasGoods = true
							requestData.push(j.id)
						}
					})
				})

				// 判断是否有勾选商品
				if (hasGoods) {
					uni.showModal({
						title: '再次确认',
						content: '确认删除购物车的商品？',
						confirmText: '确认删除',
						success: function(res) {
							if (res.confirm) {
								that.$request({
									url: '/ShopCarts/del_carts',
									data: {
										cart_id: requestData.join(',')
									},
									success: res => {
										if (res.data.status == 1) {
											uni.hideLoading()
											for (var i = productList.length - 1; i >= 0; i--) {
												if (productList[i].isTruth) {
													productList.splice(i, 1);
												} else {
													for (var j = productList[i].goods_data.length - 1; j >= 0; j--) {
														if (productList[i].goods_data[j].isTruth) {
															productList[i].goods_data.splice(j, 1);
														}
													}
												}
											}
											that.computedPro()
											uni.showModal({
												content: '删除购物车商品成功',
												showCancel: false
											})
										}
									},
									fail: () => {},
									complete: () => {}
								});
							}
						}
					});
				} else {
					uni.showToast({
						title: '请勾选商品',
						icon: 'none'
					})
				}
			},
			// 全选
			checkAll() {
				var that = this
				that.allTruth = !that.allTruth
				var productList = this.productList
				productList.forEach(item => {
					item.isTruth = that.allTruth
					item.goods_data.forEach(j => {
						j.isTruth = that.allTruth
					})
				})
				this.computedPro()
			},
			settle() {
				var that = this
				// 已选多少件
				var hasBeNums = that.hasBeNums
				var productList = this.productList
				if (hasBeNums == 0) {
					uni.showToast({
						title: '请选择商品',
						icon: "none"
					})
					return
				}
				var nowProduct = []
				productList.forEach(item => {
					var thisData = {}
					var shopInfo = {
						shopName: item.shop_name,
						shopId: item.shop_id,
						shopImg: item.shop_img
					}
					thisData['shopInfo'] = shopInfo
					thisData['productList'] = []
					item.goods_data.forEach(j => {
						if (j.isTruth) {
							var goodData = {
								goodsName: j.goodsName,
								goodsImg: j.goodsImg,
								id: j.goodsId,
								integral: j.integral,
								prerogative: j.prerogative,
								shopPrice: j.shopPrice,
								saleNums: j.cartNum
							}
							thisData['productList'].push(goodData)
						}
					})
					nowProduct.push(thisData)
				})
				var needData = nowProduct.filter(item => item.productList.length > 0)
				if (needData.length > 1) {
					// 需要分开结算
					needData.forEach(i=>{
						i.productList.forEach(j=>{
							i['zoomPrice'] = 0
							i['zoomScord'] = 0
							i['zoomPrice'] = that.add(i['zoomPrice'], that.mul(j.shopPrice, j.saleNums))
							i['zoomScord'] = that.add(i['zoomScord'], that.mul(j.integral, j.saleNums))
						})
					})
					that.needSeparate = needData
					that.separateStatus = true
				} else {
					// 直接结算
					uni.setStorageSync('needData', needData[0])
					uni.navigateTo({
						url: '/pages/confirmOrder'
					})
				}
				console.log(needData)
			},
			// 计算商品总件数及总价钱
			computedPro() {
				var that = this
				// 总件数
				var proNums = 0
				// 已选多少件
				var hasBeNums = 0
				// 合计
				var totalAmount = {
					price: 0,
					scord: 0,
					status: 'price'
				}
				// 是否全选
				var isAll = false
				var productList = this.productList
				productList.forEach(item => {
					proNums += item.goods_data.length
					if (!item.isTruth) {
						isAll = true
					}
					item.goods_data.forEach(jtem => {
						if (jtem.isTruth) {
							totalAmount.price = that.add(totalAmount.price, that.mul(jtem.shopPrice, jtem.cartNum))
							totalAmount.scord = that.add(totalAmount.scord, that.mul(jtem.integral, jtem.cartNum))
							hasBeNums += Number(jtem.cartNum)
						}
					})
				})
				// 没有商品则为空
				if (proNums == 0) {
					this.noContentShow = true
				}
				// 判断是否全选了
				if (!isAll) {
					this.allTruth = true
				} else {
					this.allTruth = false
				}
				this.proNums = proNums
				if (totalAmount.price != 0 && totalAmount.scord != 0) {
					totalAmount['status'] = 'all'
				} else if (totalAmount.price != 0) {
					totalAmount['status'] = 'price'
				} else if (totalAmount.scord != 0) {
					totalAmount['status'] = 'scord'
				}
				this.totalAmount = totalAmount
				this.hasBeNums = hasBeNums

			},
			// 处理浮点数
			mul(num1, num2) {
				var m = 0,
					r1, r2;
				var s1 = num1.toString();
				var s2 = num2.toString();
				try {
					m += s1.split('.')[1].length
				} catch (e) {

				}
				try {} catch (e) {
					m += s2.split('.')[1].length
				}
				r1 = Number(num1.toString().replace(".", ""));
				r2 = Number(num2.toString().replace(".", ""));
				return r1 * r2 / Math.pow(10, m);
			},
			add(num1, num2) {
				var r1, r2, m;
				try {
					r1 = num1.toString().split('.')[1].length;
				} catch (e) {
					r1 = 0
				}
				try {
					r2 = num2.toString().split('.')[1].length;
				} catch (e) {
					r2 = 0
				}
				m = Math.pow(10, Math.max(r1, r2));
				return Math.round(num1 * m + num2 * m) / m;
			},
			// 改变商品数量
			change: function(e) {
				var that = this
				var productList = this.productList
				productList.forEach(item => {
					item.goods_data.forEach(j => {
						if (j.id == e.ProId) {
							j.cartNum = e.value
						}
					})
				})
				that.computedPro()
			},
			// 选择某一个商品
			truthNow(e) {
				var that = this
				var productList = this.productList
				productList.forEach(item => {
					item.goods_data.forEach(j => {
						if (j.id == e.currentTarget.dataset.id) {
							j.isTruth = !j.isTruth
							// 有一个商品被取消  则取消掉商铺全选
							if (!j.isTruth) {
								item.isTruth = false
							}
						}
						// 全部商品被选中后，商铺全选也要选中
						var filterItem = item.goods_data.filter(fil => fil.isTruth == false)
						if (filterItem.length == 0) {
							item.isTruth = true
						}
					})
				})
				this.computedPro()
			},
			// 选择商家
			truthParent(e) {
				var that = this
				var productList = this.productList
				productList.forEach(item => {
					if (item.shop_id == e.currentTarget.dataset.id) {
						item.isTruth = !item.isTruth
						item.goods_data.forEach(j => {
							j.isTruth = item.isTruth
						})
					}
				})
				this.computedPro()
			},
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			})
		},
	}
</script>


<style>
	page {
		background: #f5f5f5;
	}

	.is_truth {
		width: 36rpx;
		height: 36rpx;
		background-color: #ffffff;
		border: solid 1rpx #efefef;
		border-radius: 100% !important;
	}

	.is_truth.be_truth {
		border: none;
		background: url('https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/red-choose.png') no-repeat;
		background-size: 100% 100%;
	}

	.tui-icon-plus,
	.tui-icon-reduce {
		width: 40rpx !important;
		height: 40rpx !important;
		box-shadow: 2rpx 0rpx 8rpx 0rpx rgba(173, 173, 173, 0.35) !important;
		border: solid 1rpx #efefef !important;
		box-sizing: border-box;
		font-size: 20rpx !important;
	}

	.tui-num-input {
		width: 64rpx !important;
		/* height: 40rpx !important;
		line-height: 40rpx !important; */
		min-height: 40rpx !important;
		margin: 0 !important;
		border: solid 1rpx #efefef !important;
		border-left: none !important;
		border-right: none !important;
		background: #fff !important;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
<style scoped>
	.cart-cont {
		width: 100%;
		padding: 0 24rpx 106rpx;
		box-sizing: border-box;
	}

	.head-use {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 86rpx;

	}

	.head-use text {
		font-size: 28rpx;
		letter-spacing: 1rpx;
		color: #333333;
	}

	.cart-item {
		width: 100%;
		background: #fff;
		border-radius: 8rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;
	}

	.cart-item .shop-info {
		width: 100%;
		height: 44rpx;
		display: flex;
		align-items: center;
	}

	.cart-item .shop-info image {
		width: 44rpx;
		height: 44rpx;
		margin-left: 20rpx;
		margin-right: 11rpx;
	}

	.cart-item .shop-info .s_name {
		font-size: 28rpx;
		letter-spacing: 1rpx;
		color: #333333;
	}

	.cart-item .goods-info {
		width: 100%;
	}

	.cart-item .goods-item {
		padding: 15rpx 0;
		width: 100%;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		border-bottom: solid 1rpx #efefef;
	}

	.cart-item .goods-item:last-child {
		border: none;
	}

	.cart-item .goods-item:first-child {
		margin-top: 15rpx;
	}

	.cart-item .goods-item image {
		width: 200rpx;
		height: 188rpx;
		display: block;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 8rpx;
	}

	.cart-item .goods-item .info {
		flex: 1;
		display: flex;
		height: 188rpx;
		flex-direction: column;
		justify-content: space-between;
	}

	.cart-item .goods-item .info .name {
		letter-spacing: 1rpx;
		color: #333333;
		font-size: 28rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.cart-item .goods-item .info .bottom {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.cart-item .goods-item .info .bottom .price text {
		font-size: 24rpx;
	}

	.bottom-use-btn {
		width: 100%;
		height: 106rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 0;
		transition: all 0.5s;
		background: #fff;
		z-index: 9;
		padding: 0 24rpx;
		box-sizing: border-box;
		border-top: solid 1rpx #efefef;
		bottom: -106rpx;
	}

	.bottom-use-btn .left {
		display: flex;
		align-items: center;
	}

	.bottom-use-btn .left .is_truth {
		margin-right: 10rpx;
	}

	.bottom-use-btn .left text {
		letter-spacing: 1rpx;
		color: #666666;
		font-size: 24rpx;
	}

	.bottom-use-btn .right {
		display: flex;
		align-items: center;
	}

	.bottom-use-btn .right text {
		display: block;
		width: 120rpx;
		height: 60rpx;
		background-color: #ffffff;
		border-radius: 36rpx;
		border: solid 1rpx #efefef;
		text-align: center;
		line-height: 60rpx;
		color: #999999;
	}

	.bottom-use-btn .right text:nth-child(1) {
		margin-right: 20rpx;
	}

	.bottom-use-btn .right text:nth-child(2) {
		margin-right: 20rpx;
		border: solid 1rpx #f34930;
		color: #f34930;
	}

	.price-and-btn {
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.price-and-btn .price-content {
		flex: 1;
		display: flex;
		align-items: flex-end;
		flex-direction: column;
		padding-right: 20rpx;
		box-sizing: border-box;
	}

	.price-and-btn .price-content>view {
		display: flex;
	}

	.price-and-btn .price-content>view:nth-child(1)>view:nth-child(1) {
		font-size: 28rpx;
		letter-spacing: 1rpx;
		color: #333333;
	}

	.price-and-btn .price-content>view:nth-child(1)>view:nth-child(2) {
		font-size: 24rpx;
		letter-spacing: 1rpx;
		color: #666666;
	}

	.price-and-btn .price-content>view:nth-child(2) {
		letter-spacing: 1rpx;
		color: #666666;
		font-size: 24rpx;
	}

	.price-and-btn .settle {
		width: 200rpx;
		height: 72rpx;
		background-image: linear-gradient(-30deg,
			#f34930 0%,
			#f8990b 100%);
		border-radius: 36rpx;
		line-height: 72rpx;
		text-align: center;
		color: #fff;
		font-size: 30rpx;
	}

	.goShopping {
		width: 300rpx;
		line-height: 60rpx;
		height: 60rpx;
		text-align: center;
		background: #F34930;
		color: #fff;
		margin: 20rpx auto;
		border-radius: 10rpx;
	}

	.separate-layer {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .4);
		z-index: 8;
	}

	.separate {
		width: 100%;
		height: 800rpx;
		display: flex;
		flex-direction: column;
		position: fixed;
		left: 0;
		transition: all 0.5s;
		background: #fff;
		z-index: 9;
		box-sizing: border-box;
		/* bottom: 800rpx; */
		bottom: 0
	}

	.separate>view:nth-child(1) {
		width: 100%;
		height: 100rpx;
		background: #f2f2f2;
		text-align: center;
		line-height: 100rpx;
		font-size: 30rpx;
		color: #333;
	}

	.separate .content {
		flex: 1;
		background: #f2f2f2;
		display: flex;
		flex-direction: column;
		overflow-y: scroll;
	}

	.separate .content .separate-item {
		width: 100%;
		height: 150rpx;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		background: #fff;
		border-bottom: solid 1rpx #efefef;
	}

	.separate .content .separate-item>view:nth-child(1) {
		flex: 1;
		height: 90rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.separate .content .separate-item>view:nth-child(1)>view:nth-child(1) {
		color: #999;
		font-size: 24rpx;
	}

	.separate .content .separate-item>view:nth-child(1)>view:nth-child(2) text {
		
		font-size: 28rpx;
		color: #F34930;
	}

	.separate .content .separate-item>view:nth-child(1)>view:nth-child(2) text:first-child {
		color: #333;
	}

	.separate .content .separate-item>view:nth-child(2) {
		width: 150rpx;
		border-radius: 8rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 28rpx;
		border: solid 1rpx #F34930;
		color: #F34930;
	}

	.separate .btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #F34930;
		color: #fff;
		
	}
</style>
<style></style>
